import React, { Component, Fragment } from "react";
import { useContext } from "react";
import "./index.css";

// 创建Context对象，必须放在组件外面
const MyContext = React.createContext();

export default class A extends Component {
    state = { username: "Tom", age: 18 };

    render() {
        const { username, age } = this.state;

        return (
            <div className="parent">
                <h2>我是A组件</h2>
                <h4>我的用户名是：{username}</h4>
                {/* 使用 Context.Provider 包裹需要获取数据的孙子组件 */}
                <MyContext.Provider value={{ username: username, age: age }}>
                    <B />
                </MyContext.Provider>
            </div>
        );
    }
}

class B extends Component {
    render() {
        return (
            <div className="child">
                <h2>我是B组件</h2>
                <C />
            </div>
        );
    }
}

// class C extends Component {
//     /**
//      * 声明静态属性contextType并指定Context组件
//      */
//     static contextType = MyContext;

//     render() {
//         const { username, age } = this.context;

//         return (
//             <div className="grand">
//                 <h2>我是C组件</h2>
//                 <h4>
//                     我从A组件接收到的用户名：{username}，年龄是 {age}
//                 </h4>
//             </div>
//         );
//     }
// }

function C() {
    // 使用useContext Hook接收Context
    const context = useContext(MyContext);

    return (
        <div className="grand">
            <h2>我是C组件</h2>
            <h4>
                我从A组件接收到的用户名：{context.username}，年龄是{" "}
                {context.age}
                {/* 使用Context.Consumer组件接收Context */}
                <MyContext.Consumer>
                    {(value) => {
                        return (
                            <Fragment>
                                {value.username}，年龄是 {value.age}
                            </Fragment>
                        );
                    }}
                </MyContext.Consumer>
            </h4>
        </div>
    );
}
